<script setup lang="ts">
import { onMounted, ref, useTemplateRef } from 'vue';

const usingRef = useTemplateRef<HTMLElement>('using');

onMounted(() => {
    const observer = new MutationObserver((mutationsList) => {
        for (const mutation of mutationsList) {
            if (mutation.type === 'childList') {
                console.log('子元素发生变化：', mutation);
            } else if (mutation.type === 'attributes') {
                console.log('属性发生变化：', mutation);
            }
        }
    });

    const config = {
        childList: true,
        attributes: true,
        subtree: true,
    };

    const targetElement = usingRef.value!.querySelector('.root') as HTMLElement;
    targetElement.getBoundingClientRect();
    observer.observe(targetElement, config);
});

const text = ref('原始内容');
</script>

<template>
    <div class="using" ref="using">
        <input v-model="text" type="text" />
        <div class="root">
            <div class="leave" :data-xxx="text">
                <div>{{ text }}</div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.using {
    height: 300px;
}
</style>
